<template>
    <div>
      <div class="aaa">
        <div class="bbb">手机号:</div>
        <div><el-input v-model="mobile" placeholder="请输入内容"></el-input></div>
      </div>
      <div class="aaa">
        <div class="bbb">图片验证码:</div>
        <div><el-input v-model="img_code" placeholder="请输入图片验证码"></el-input></div>
        <div><img @click="changeCode" :src="'http://127.0.0.1:8000/users/api/v1/image_code/'+uuid+'/' " /></div>
      </div>
      <div class="aaa">
        <div><el-button @click="hq">获取验证码</el-button></div>
      </div>
      <div class="aaa">
        <div class="bbb">验证码:</div>
        <div><el-input v-model="code" placeholder="请输入验证码"></el-input></div>
      </div>
      <div class="aaa">
        <div><el-button @click="login">登录</el-button></div>
      </div>
    </div>
</template>

<script>
import {v4 as uuid4} from 'uuid'
export default {
    name: 'LoginView',
    data() {
        return {
          uuid:'',
          mobile:'',
          img_code:'',
          code:''
        };
    },
    props: {},

    components: {},

    created() {},

    mounted() {
      this.changeCode()
    },

    beforeDestroy() {},

    methods: {
      changeCode(){
        this.uuid = uuid4()
      },
      hq(){
        this.$axios.get('/users/api/v1/sms/'+this.mobile+'/',{
          params:{
            uuid:this.uuid,
            img_code:this.img_code
          }
        })
        .then(resp=>{
          console.log(resp)
          if(resp.data.code==200){
            alert(resp.data.msg)
          }else{
            alert(resp.data.msg)
          }
        })
      },
      login(){
        this.$axios.post('/users/api/v1/login/',{
          mobile:this.mobile,
          code:this.code
        })
        .then(resp=>{
          console.log(resp)
          if(resp.data.code==200){
            alert(resp.data.msg)
            localStorage.setItem('token',resp.data.token)
            this.$router.push('/zhu')
          }else{
            alert(resp.data.msg)
          }
        })
      }
    },

    computed: {},

    watch: {},

    directives: {},

    filters: {}
};
</script>

<style scoped>
.aaa{
  display: flex;
}
.bbb{
  width: 100px;
}
</style>
